<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="iname" label="产品名称" />
      <el-table-column prop="yieldMonth" label="月利率" />
      <el-table-column prop="yieldYear" label="年利率" />
      <el-table-column prop="riskLevel" label="受益等级" />
      <el-table-column prop="handDay" label="基金期限" />
      <el-table-column prop="startMoney" label="单股价格" />
      <el-table-column prop="region" label="地区" />
      <el-table-column prop="incomeName" label="类型" />
      <el-table-column v-slot="scope">
        <el-input-number v-model="scope.row.remark" :min="1" />
      </el-table-column>

      <el-table-column v-slot="scope">
        <el-button type="warning" @click="showPay(scope.row)">
          购买
        </el-button>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="购买">
      <span>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <h2>
            所付金额：
            <span style="color: green;">{{price}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            所买份额：
            <span style="color: red">{{remark}}</span>
            <br><br><br><br>
            电子账户余额：
            <span style="color: red" v-if="electronicPrice<price">{{electronicPrice}}</span>
            <span style="color: green" v-if="electronicPrice>price">{{electronicPrice}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            银行卡余额：
            <span>
              <el-select
                  v-model="backCard"
                  placeholder="Select"
                  style="width: 240px"
                  @change="getBankPrice"
              >
              <el-option
                  v-for="item in bankcardList"
                  :key="item.id"
                  :label="'卡号：' + item.bankCard + '  余额' + item.balance"
                  :value="item.bankCard"
              />
            </el-select>
            </span>
          </h2>
          <el-form-item>
            <el-button type="success" v-if="electronicPrice>=price" @click="epay">电子账户支付</el-button>
            <el-button type="danger" disabled v-if="electronicPrice<price">电子账户支付(余额不足)</el-button>
            <el-button type="success" v-if="backCardPrice>=price" @click="pay">银行支付支付</el-button>
            <el-button type="danger" disabled v-if="backCardPrice<price">银行支付支付(余额不足)</el-button>
            <el-button type="success" @click="buyfinancal">支付宝支付</el-button>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {buys, buys2, ebuys2, lists} from '@/api/finanicl'
import {findTotalPrice} from "@/api/total";
import {ElMessage} from "element-plus";
const num = ref(1)
const tableData = ref([])
const dialogVisible = ref(false)
const formInline = ref({})
const price = ref('')
//电子账户余额
const electronicPrice = ref(0)
//每个银行卡单独余额
const bankcardList = ref([])

//卡号
const backCard = ref()
const backCardPrice = ref()

//row id
const id = ref()
//row 的份额
const remark = ref()
const flag = ref(false)

function epay(){
  ebuys2(id.value, price.value, remark.value).then(res=>{
    if(res.code == 200){
      ElMessage({
        message: '购买成功',
        type: 'success',
      })
      dialogVisible.value = false
      flag.value =false
      getTotalPrice()
    }else{
      ElMessage({
        message: '购买失败',
        type: 'error',
      })
    }
  })
}
function pay(){

  buys2(id.value, price.value, remark.value,backCard.value).then(res=>{
    if(res.code == 200){
      ElMessage({
        message: '购买成功',
        type: 'success',
      })
      dialogVisible.value = false
      flag.value =false
      getTotalPrice()
    }else{
      ElMessage({
        message: '购买失败',
        type: 'error',
      })
    }
  })
}

function getBankPrice(){
  for (let i = 0; i < bankcardList.value.length; i++) {
    if (backCard.value == bankcardList.value[i].bankCard) {
      backCard.value = bankcardList.value[i].bankCard
      backCardPrice.value = bankcardList.value[i].balance
    }
  }
}
function getTotalPrice() {
  findTotalPrice().then(res => {
    if (res.code == 200) {
      electronicPrice.value = res.data.electronicPrice
      bankcardList.value = res.data.bankcardList
      backCard.value = res.data.bankcardList[0].bankCard
      backCardPrice.value = res.data.bankcardList[0].balance
    }
  })
}
getTotalPrice()
function showPay(row){

  price.value = row.startMoney *  row.remark
  remark.value = row.remark
  id.value = row.id
  dialogVisible.value =true
}
function buyfinancal() {
  buys(id.value, price.value, remark.value).then(function(response) {
    document.write(response)
  })
}

function findAll() {
  lists().then(resp => {
    tableData.value = resp.data
  })
}
function selecPrice() {}
findAll()
</script>

<style scoped></style>
